import React, { useState, useEffect, useCallback } from "react";
import * as _lodash from "lodash";
import { useEditStore } from "@/context/editStore/index";
// 编辑器封装的组件
import {
    HeTextControlConfig,  
    HeTitleControlConfig,
    HeImgControlConfig,
    HeNoticeControlConfig,
    HeSearchControlConfig,
    HeDividerControlConfig,
    HeBannerControlConfig,
    HeTabNavControlConfig
} from "../../config-attrs-template/index";  // 组件属性模板
import "./index.less";

function ConfigAttrs(): JSX.Element {
    // const [curSelectedAssembly, setCurSelectedAssembly] = useState({}); // 选中当前组件属性数据
    const [attrsConfig, setAttrsConfig] = useState(null); // 生成的dom
    const {state, dispatch} = useEditStore();

    useEffect(() => {
        console.log("--state.curSelectedAssembly---");
        console.log(state.curSelectedAssembly);
        const attrs = hsndleConfigAttrs();
        setAttrsConfig(attrs);
    }, [state.curSelectedAssembly]);

    const hsndleConfigAttrs = () => {
        if(state.curSelectedAssembly.component === "HeText") {
            return <HeTextControlConfig/>;
        }
        if(state.curSelectedAssembly.component === "HeTitle") {
            return <HeTitleControlConfig/>;
        }
        if(state.curSelectedAssembly.component === "HeImg") {
            return <HeImgControlConfig/>;
        }
        if(state.curSelectedAssembly.component === "HeNoticebar") {
            return <HeNoticeControlConfig/>;
        }
        if(state.curSelectedAssembly.component === "HeSearch") {
            return <HeSearchControlConfig/>;
        }
        if(state.curSelectedAssembly.component === "HeDivider") {
            return <HeDividerControlConfig/>;
        }
        if(state.curSelectedAssembly.component === "HeBanner") {
            return <HeBannerControlConfig/>;
        }
        if(state.curSelectedAssembly.component === "HeTabNav") {
            return <HeTabNavControlConfig/>;
        }

        

    };

  return (
        <div>
            {attrsConfig}
        </div>
        // <div className="box-right-all">
        //     <div className="right-all-title">公告</div>
        //     <div className="right-all-value">
        //         {/* <div className="attrs-title">公告标题</div> */}
        //         <WrapTitle title={"公告标题"}></WrapTitle>
        //         <div className=""></div>
        //     </div>
        //     <div className="right-all-attrs">
        //         {/* <div className="attrs-title">公告属性</div> */}
        //         <WrapTitle  title={"公告属性"}></WrapTitle>

        //     </div>
        //     <div  className="right-all-style">
        //         {/* <div className="attrs-title">公告样式</div> */}
        //         <WrapTitle title={"公告样式"}></WrapTitle>
        //     </div>
        // </div> 
  );
}

export default ConfigAttrs;